<template>
  <div id="list-item">
    <div class="ls-li" v-bind:style="{backgroundColor: backgroundColor}"
      @mouseover="itemMouseover($event, dataProvider)" 
      @mouseout="itemMouseout($event, dataProvider)" 
      @click="itemClick($event, dataProvider)">
      <div class="left-div" style="float: left;">{{ dataProvider.label }}</div>
      <div class="option-btn">
        <i class="el-icon-close" v-bind:style="{display: iconDisplay}"></i>
      </div>
      <div style="clear: both;"></div>
    </div>
  </div>
</template>
<script>
  
  export default {
    name: 'list-item',
    data: function() {
      return {
        msg: '',
        backgroundColor:"#FFF",
        iconDisplay: "none",
        isSelected: this.dataProvider.selected
      }
    },
    methods: {
      itemMouseover: function(e, data) {
        if(!data.selected) {
          this.backgroundColor = "#E5E9F2";
          this.iconDisplay = "inline";
        }
      },
      itemMouseout: function(e, data) {
        if(!data.selected) {
          this.backgroundColor = "#FFF";
          this.iconDisplay = "none";
        }
      },
      itemClick: function(e, data) {
        this.backgroundColor = "#D3DCE6";
        this.iconDisplay = "inline";
        data.selected = true;
        this.$emit("itemClick", data);
      }
    },
    watch: {
      dataProvider: function (val) {
        console.log(val)
      }
    },
    props: {
      dataProvider: {
        type: Object,
        default: function() {
          return {};
        }
      },
      selected: {
        type: Boolean,
        default: function() {
          return false;
        }
      }
    }
  }
  
</script>
<style scoped="scoped">

  .selected {
    background-color: #D3DCE6;
  }
  .selected .option-btn i {
    display: inline;
  }
  .ls-li {
    height: 40px;
    line-height: 40px;
    padding-left: 5px;
    padding-right: 10px;
  }
  .ls-li:hover {
    cursor: pointer;
  }
  .option-btn {
    float: right; 
    font-size: 12px;
    color: #FF4949;
  }
</style>